<div class="col-md-12">

    <h1>{{ vm.title }}</h1>

    <a ui-sref="employees">{{ 'home' | translate }}</a> | <a ui-sref="About">{{ 'about' | translate }}</a> | <a ui-sref="Contact">{{ 'contact' | translate }}</a>

    <br/><br/>

    <bootstrap-panel>
        <panel-heading>
            <button type="button" ng-click="vm.addEmp()" title="{{ 'addEmp' | translate }}" class="btn btn-sm btn-success">
                <i class="fa fa-plus-circle">
                </i> {{ 'addEmp' | translate }}
            </button>
        </panel-heading>
        <table st-table="vm.displayedEmployees" st-safe-src="vm.employees" class="table table-striped">
            <thead>
            <tr>
                <th st-sort="FirstName" st-sort-default="true">{{ 'name' | translate }}</th>
                <th st-sort="LastName" st-sort-default="true">{{ 'lastName' | translate }}</th>
                <th st-sort="Email">{{ 'email' | translate }}</th>
                <th st-sort="EmpNumber">{{ 'empNumber' | translate }}</th>
            </tr>
            <tr>
                <th colspan="5"><input st-search class="form-control" placeholder="{{ 'searchPlaceholder' | translate }}" type="text"/></th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="emp in vm.displayedEmployees">
                <td>{{emp.FirstName}}</td>
                <td>{{emp.LastName}}</td>
                <td>{{emp.Email}}</td>
                <td>{{emp.EmpNumber}}</td>
                <td>
                    <div class="pull-right">
                        <button type="button" ng-click="vm.editEmp(emp)" class="btn btn-sm btn-default" title="{{ 'editEmp' | translate }}">
                            <i class="fa fa-pencil">
                            </i>
                        </button>
                        <button type="button" ng-click="vm.delEmp(emp)" class="btn btn-sm btn-danger" title="{{ 'delEmp' | translate }}">
                            <i class="fa fa-trash">
                            </i>
                        </button>
                    </div>
                </td>
            </tr>
            </tbody>
            <tfoot>
            <tr>
                <td colspan="5" class="text-center">
                    <div st-pagination="" st-items-by-page="10"></div>
                </td>
            </tr>
            </tfoot>
        </table>
    </bootstrap-panel>
</div>
